<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			关注列表
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="search-conten">
			<view class="expert-list" v-for="(item,index) in content" :key="index">
				<view class="expert-img" @click="experInfo(item.id)">
					<image :src="item.avatar"  style="width: 100%;height: 100%;"></image>
				</view>
				<view class="expert-info">
					<view class="expert-name">
						{{item.name}}
					</view>
					<view class="expert-hosp">
						{{item.hospital}}
					</view>
				</view>
				<view class="expert-btn" @click="cancel(item.id,index)">
					取消关注
				</view>
			</view>
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower" v-if="total>0"></tn-load-more>
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="list"
				v-if="content.length == 0"></tn-empty>
		</view>
	</view>
</template>

<script>
	import {
		getExpertByUserId,
		cancelFollowExpert
	} from '@/util/index.js'
	export default {
		data() {
			return {
				title: '',
				page: 1,
				limit: 20,
				content: [],
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				total:0
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			experInfo(id){
				uni.navigateTo({
					url: `../../templatePage/expert-info/expert-info?id=${id}`
				})
			},
			getList() {
				getExpertByUserId({
					page: this.page,
					limit: this.limit,
					selectType: '1'
				}).then((res) => {
					this.total = res.total
					this.content = this.content.concat(res.list)
					if (this.content.length < res.total) {
						this.loadStatus = 'loading'
					} else {
						this.loadStatus = 'noMore'
					}
					uni.stopPullDownRefresh();
				}).catch(()=>{
					uni.stopPullDownRefresh();
				})
			},
			cancel(id,index){
				cancelFollowExpert({
					expertId: id
				}).then((res) => {
					uni.showToast({
						title:'已取消关注！',
						icon:'none'
					})
					this.content.splice(index,1)
				})
			},
			refresh() {
				this.page = 1
				this.content = []
				this.getList()
			}

		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.content = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.loadStatus == 'noMore') return
			this.page++;
			this.getList();
		},
	}
</script>

<style lang="less">
	.search-conten {}

	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 20rpx 20rpx;
		position: fixed;
		background-color: #FFFFFF;

		.search-input {
			padding: 0 40rpx;
			font-size: 34rpx;
			flex: 1;
			background-color: #eeeeee;
			border-radius: 40rpx;
			margin-right: 20rpx;
		}

		.search-btn {
			background-color: #FFFFFF;
			width: 150rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #01BEFF;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.load-more {
		padding: 20rpx;
	}
	//g关注列表
	.expert-list{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eeeeee;
		.expert-img{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			overflow: hidden;
		}
		.expert-info{
			flex: 1;
		}
		.expert-name{
			font-size: 30rpx;
			font-weight: bold;
		}
		.expert-hosp{
			font-size: 24rpx;
			color: #9b9b9b;
		}
		.expert-btn{
			width: 160rpx;
			height: 60rpx;
			background: #78909C;
			color: #ffffff;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
			font-size: 25rpx;
		}
	}
</style>
